<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>平台管理员</a-breadcrumb-item>
    <a-breadcrumb-item>电影信息管理</a-breadcrumb-item>
  </a-breadcrumb>
  <!-- 查询 -->
  <a-form style="margin-bottom: 5px" layout="inline" :model="query">
    <a-form-item>
      <a-input v-model:value="query.mov_id" style="width: 160px">
        <template #prefix>ID：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="query.mov_name" style="width: 160px">
        <template #prefix>片名：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="query.mov_label" style="width: 160px">
        <template #prefix>标签：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button @click="getPage(1)" type="primary">
        <template #icon><SearchOutlined /></template>
        查询
      </a-button>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="openAdd">新增</a-button>
    </a-form-item>
  </a-form>
  <!-- 表格定义 -->
  <a-table
    :columns="columns"
    :dataSource="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 操作按钮 -->
    <template #opr="{ record }">
      <a-button type="link" @click="openUpd(record)">修改</a-button>
      <a-divider type="vertical" />
      <a-button type="link" @click="execDel(record.mov_id)">删除</a-button>
    </template>
  </a-table>
  <!-- 新增页面-->
  <a-modal v-model:visible="visible" title="新增电影" @ok="execAdd">
    <a-form
      :model="addObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="片名">
        <a-input v-model:value="addObj.mov_name" />
      </a-form-item>
      <a-form-item label="时长">
        <a-input v-model:value="addObj.mov_time" />
      </a-form-item>
      <a-form-item label="标签">
        <a-input v-model:value="addObj.mov_label" />
      </a-form-item>
      <a-form-item label="上映日期">
        <a-input v-model:value="addObj.mov_date" />
      </a-form-item>
      <a-form-item label="海报地址">
        <a-input v-model:value="addObj.mov_img_path" />
      </a-form-item>
      <a-form-item label="简介">
        <a-input v-model:value="addObj.mov_desc" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>
  <!-- 修改弹窗 -->
  <a-modal v-model:visible="visible2" title="修改信息" @ok="execUpd">
    <a-form
      :model="updObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="片名">
        <a-input v-model:value="updObj.mov_name" />
      </a-form-item>
      <a-form-item label="时长">
        <a-input v-model:value="updObj.mov_time" />
      </a-form-item>
      <a-form-item label="标签">
        <a-input v-model:value="updObj.mov_label" />
      </a-form-item>
      <a-form-item label="上映日期">
        <a-input v-model:value="updObj.mov_date" />
      </a-form-item>
      <a-form-item label="海报地址">
        <a-input v-model:value="updObj.mov_img_path" />
      </a-form-item>
      <a-form-item label="简介">
        <a-input v-model:value="updObj.mov_desc" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from "vue";
import { get, post, put, del, tip } from "@/common";
const columns = [
  {
    title: "影片ID",
    dataIndex: "mov_id",
  },
  {
    title: "片名",
    dataIndex: "mov_name",
    width: 130,
  },
  {
    title: "时长",
    dataIndex: "mov_time",
  },
  {
    title: "评分",
    dataIndex: "mov_score",
    key: "score",
  },
  {
    title: "简介",
    dataIndex: "mov_desc",
    width: 670,
  },
  {
    title: "标签",
    dataIndex: "mov_label",
  },
  {
    title: "上映日期",
    dataIndex: "mov_date",
  },
  {
    title: "操作",
    key: "opr",
    slots: {
      customRender: "opr", //定义插槽，and bugs all caused by your careless
    },
  },
];
//分页处理-start
const query = reactive({});

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pages: 5, //总页数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,共" +
      pagination.pages +
      "页,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/admin/a_movie", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    //pagination.current = page.value.current;
    //pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
    pagination.pages = Math.ceil(page.value.total / pagination.pageSize);
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;

  pagination.pages = Math.ceil(pagi.total / pagination.pageSize);

  getPage(pagination.current);
};

//分页处理-end

//以下为新增电影相关定义
const addObj = reactive({
  mov_name: "",
  mov_desc: "",
  mov_img_path: "",
  mov_label: "",
  mov_time: "",
  mov_date:"",
});
const visible = ref(false);
const openAdd = () => {
  visible.value = true;
};
const execAdd = () => {
  post("/admin/a_movie", addObj).then((res) => {
    addObj.mov_name = "";
    addObj.mov_desc = "";
    addObj.mov_img_path = "";
    addObj.mov_label = "";
    addObj.mov_time = "";
    visible.value = false;
    tip.success("新增成功");
    getPage(page.value.last + 1);
  });
};

//修改影片信息
const updObj = reactive({
  mov_id: "",
  mov_name: "",
  mov_desc: "",
  mov_img_path: "",
  mov_label: "",
  mov_time: "",
  mov_date:"",
});
const visible2 = ref(false);
const openUpd = (mov) => {
  updObj.mov_id = mov.mov_id;
  updObj.mov_name = mov.mov_name;
  updObj.mov_desc = mov.mov_desc;
  updObj.mov_img_path = mov.mov_img_path;
  updObj.mov_label = mov.mov_label;
  updObj.mov_time = mov.mov_time;
  updObj.mov_date=mov.mov_date;
  visible2.value = true;
};
const execUpd = () => {
  put("/admin/a_movie", updObj).then((res) => {
    updObj.mov_id = "";
    updObj.mov_name = "";
    updObj.mov_desc = "";
    updObj.mov_img_path = "";
    updObj.mov_label = "";
    updObj.mov_time = "";
    visible2.value = false;
    tip.success("修改成功");
    getPage(page.value.current);
  });
};
//删除影片
const execDel = (mov_id) => {
  del("/admin/a_movie/" + mov_id).then((res) => {
    tip.success("删除成功");
    getPage(page.value.current);
  });
};
</script>